<template>
	<view class="flex" style="position: relative;height: 0;z-index: 10;">
		<view class="dots-item" :style="{'background-color':index == activeIndex ? activeColor : color}"
			:class="activeIndex == index ? 'dots-active' : ''" v-for="(item,index) in length" :key="index"></view>
	</view>
</template>

<script>
	export default {
		name: 'dots',
		data() {
			return {

			}
		},
		props: {
			length: {
				type: Number,
				default: 0
			},
			activeIndex: {
				type: Number,
				default: 0,
			},
			activeColor: {
				type: String,
				default: '#FFFFFF',
			},
			color: {
				type: String,
				default: 'rgba(255, 255, 255, 0.30)',
			},

		}
	}
</script>

<style lang="scss">
	.dots-item {
		width: 14rpx;
		height: 4rpx;
		border-radius: 4rpx;
		transition: width 0.3s linear;

	}

	.dots-item+.dots-item {
		margin-left: 15rpx;
	}

	.dots-active {
		// width: 43rpx;
	}
</style>
